<?php
session_start();

include_once 'Nav.php';
$article = "select * from article order by id desc";
$resarticle = mysqli_query($connect, $article);
?>

<link href="/admin/assets/css/vendor/dataTables.bootstrap4.css" rel="stylesheet" type="text/css"/>
<link href="/admin/assets/css/vendor/responsive.bootstrap4.css" rel="stylesheet" type="text/css"/>
<link href="/admin/assets/css/vendor/buttons.bootstrap4.css" rel="stylesheet" type="text/css"/>
<link href="/admin/assets/css/vendor/select.bootstrap4.css" rel="stylesheet" type="text/css"/>
<!-- 添加图片预览所需的CSS -->
<link href="/admin/assets/css/vendor/magnific-popup.css" rel="stylesheet" type="text/css"/>
<style>
    .preview-image {
        max-width: 80px;
        max-height: 60px;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s;
    }
    .preview-image:hover {
        transform: scale(1.05);
    }
    .no-image {
        color: #999;
        font-style: italic;
        font-size: 12px;
    }
    
    /* 移动端优化样式 */
    @media (max-width: 767px) {
        .mobile-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .mobile-meta {
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .mobile-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        
        .mobile-actions .btn {
            padding: 4px 8px;
            font-size: 12px;
        }
        
        .mobile-card {
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 15px;
            background: #fff;
        }
        
        .mobile-preview {
            text-align: center;
            margin: 10px 0;
        }
        
        .desktop-table {
            display: none;
        }
        
        .mobile-list {
            display: block;
        }
    }
    
    @media (min-width: 768px) {
        .desktop-table {
            display: block;
        }
        
        .mobile-list {
            display: none;
        }
    }
</style>
<!-- third party css end -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mb-3 size_18">点点滴滴
                    <a class="fabu" href="/admin/littleAdd.php">
                        <button type="button" class="btn btn-success btn-sm right_10">
                            <i class="mdi mdi-circle-edit-outline"></i>新增
                        </button>
                    </a>
                </h4>
                
                <!-- 桌面端表格视图 -->
                <div class="desktop-table">
                    <table id="basic-datatable" class="table dt-responsive nowrap" width="100%">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>标题</th>
                            <th>图片预览</th>
                            <th>发布时间</th>
                            <th>发布者</th>
                            <th style="width:150px;">操作</th>
                        </tr>
                        </thead>

                        <form class="needs-validation" action="littleupda.php" method="post">
                            <tbody>
                            <?php
                            $SerialNumber = 0;
                            while ($info = mysqli_fetch_array($resarticle)) {
                                $SerialNumber++;
                                
                                // 图片获取方法改进 - 基于Markdown格式提取图片
                                $imageUrl = '';
                                
                                // 从articletext中提取Markdown格式的图片
                                if (isset($info['articletext'])) {
                                    $content = $info['articletext'];
                                    // 提取Markdown格式的图片链接 ![alt](url)
                                    if (preg_match('/!\[(.*?)\]\((.*?)\)/', $content, $matches)) {
                                        $imageUrl = $matches[2];
                                    }
                                }
                                
                                // 如果articletext中没有找到图片，尝试从articlecontent中提取HTML格式的图片
                                if (empty($imageUrl) && isset($info['articlecontent'])) {
                                    $content = $info['articlecontent'];
                                    // 提取HTML格式的图片
                                    if (preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches)) {
                                        $imageUrl = $matches[1];
                                    }
                                }
                                
                                $hasImage = !empty($imageUrl);
                                ?>
                                <tr>
                                    <td>
                                        <div class="SerialNumber">
                                            <?php echo $SerialNumber ?>
                                        </div>
                                    </td>
                                    <td><?php echo $info['articletitle'] ?></td>
                                    <td>
                                        <?php if ($hasImage): ?>
                                            <a href="<?php echo $imageUrl; ?>" class="image-popup">
                                                <img src="<?php echo $imageUrl; ?>" class="preview-image" alt="预览图">
                                            </a>
                                        <?php else: ?>
                                            <span class="no-image">无图片</span>
                                        <?php endif; ?>
                                    </td>
                                    <td><?php echo $info['articletime'] ?></td>
                                    <td><?php echo $info['articlename'] ?></td>
                                    <td>
                                        <a href="modlitt.php?id=<?php echo $info['id'] ?>">
                                            <button type="button" class="btn btn-secondary btn-rounded">
                                                <i class=" mdi mdi-clipboard-text-play-outline mr-1"></i>修改
                                            </button>
                                        </a>
                                        <a href="javascript:del(<?php echo $info['id']; ?>,'<?php echo $info['articletitle']; ?>');">
                                            <button type="button" class="btn btn-danger btn-rounded">
                                                <i class=" mdi mdi-delete-empty mr-1"></i>删除
                                            </button>
                                        </a>
                                        <input name="id" value="<?php echo $info['id']; ?>" type="hidden">
                                    </td>
                                </tr>
                                <?php
                            }
                            ?>
                            </tbody>
                        </form>
                    </table>
                </div>
                
                <!-- 移动端卡片视图 -->
                <div class="mobile-list">
                    <?php
                    // 重置数据库查询结果指针
                    mysqli_data_seek($resarticle, 0);
                    $SerialNumber = 0;
                    while ($info = mysqli_fetch_array($resarticle)) {
                        $SerialNumber++;
                        
                        // 图片获取方法改进 - 基于Markdown格式提取图片
                        $imageUrl = '';
                        
                        // 从articletext中提取Markdown格式的图片
                        if (isset($info['articletext'])) {
                            $content = $info['articletext'];
                            // 提取Markdown格式的图片链接 ![alt](url)
                            if (preg_match('/!\[(.*?)\]\((.*?)\)/', $content, $matches)) {
                                $imageUrl = $matches[2];
                            }
                        }
                        
                        // 如果articletext中没有找到图片，尝试从articlecontent中提取HTML格式的图片
                        if (empty($imageUrl) && isset($info['articlecontent'])) {
                            $content = $info['articlecontent'];
                            // 提取HTML格式的图片
                            if (preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches)) {
                                $imageUrl = $matches[1];
                            }
                        }
                        
                        $hasImage = !empty($imageUrl);
                        ?>
                        <div class="mobile-card">
                            <div class="mobile-title"><?php echo $info['articletitle'] ?></div>
                            <div class="mobile-meta">
                                <span class="badge badge-light">#<?php echo $SerialNumber ?></span>
                                <span class="ml-2"><?php echo $info['articletime'] ?></span>
                                <span class="ml-2">发布者: <?php echo $info['articlename'] ?></span>
                            </div>
                            
                            <?php if ($hasImage): ?>
                                <div class="mobile-preview">
                                    <a href="<?php echo $imageUrl; ?>" class="image-popup">
                                        <img src="<?php echo $imageUrl; ?>" class="preview-image" alt="预览图">
                                    </a>
                                </div>
                            <?php endif; ?>
                            
                            <div class="mobile-actions">
                                <a href="modlitt.php?id=<?php echo $info['id'] ?>" class="btn btn-sm btn-secondary">
                                    <i class="mdi mdi-clipboard-text-play-outline"></i> 修改
                                </a>
                                <a href="javascript:del(<?php echo $info['id']; ?>,'<?php echo $info['articletitle']; ?>');" class="btn btn-sm btn-danger">
                                    <i class="mdi mdi-delete-empty"></i> 删除
                                </a>
                            </div>
                        </div>
                        <?php
                    }
                    ?>
                </div>

            </div> <!-- end card body-->
        </div> <!-- end card -->
    </div><!-- end col-->
</div>


<script>
    function del(id, articletitle) {
        if (confirm('您确认要删除标题为 ' + articletitle + ' 的文章吗')) {
            location.href = 'dellitt.php?id=' + id + '&title' + articletitle;
        }
    }
</script>
<?php
include_once 'Footer.php';
?>
<!-- third party js -->
<script src="/admin/assets/js/vendor/jquery.dataTables.min.js"></script>
<script src="/admin/assets/js/vendor/dataTables.bootstrap4.js"></script>
<script src="/admin/assets/js/vendor/dataTables.responsive.min.js"></script>
<script src="/admin/assets/js/vendor/responsive.bootstrap4.min.js"></script>
<script src="/admin/assets/js/vendor/dataTables.buttons.min.js"></script>
<script src="/admin/assets/js/vendor/buttons.bootstrap4.min.js"></script>
<script src="/admin/assets/js/vendor/buttons.html5.min.js"></script>
<script src="/admin/assets/js/vendor/buttons.flash.min.js"></script>
<script src="/admin/assets/js/vendor/buttons.print.min.js"></script>
<script src="/admin/assets/js/vendor/dataTables.keyTable.min.js"></script>
<script src="/admin/assets/js/vendor/dataTables.select.min.js"></script>
<!-- 添加图片预览所需的JS -->
<script src="/admin/assets/js/vendor/jquery.magnific-popup.min.js"></script>
<script>
    $(document).ready(function() {
        // 初始化图片弹窗
        $('.image-popup').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            mainClass: 'mfp-img-mobile',
            image: {
                verticalFit: true
            }
        });
        
        // 初始化DataTables
        $('#basic-datatable').DataTable({
            responsive: true,
            language: {
                paginate: {
                    previous: "<i class='mdi mdi-chevron-left'>",
                    next: "<i class='mdi mdi-chevron-right'>"
                },
                info: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                lengthMenu: "显示 _MENU_ 项结果",
                search: "搜索:",
                zeroRecords: "没有找到匹配的记录",
                infoEmpty: "显示第 0 至 0 项结果，共 0 项",
                infoFiltered: "(由 _MAX_ 项结果过滤)"
            },
            // 设置默认显示的列
            columnDefs: [
                { responsivePriority: 1, targets: 0 }, // 序号
                { responsivePriority: 2, targets: 1 }, // 标题
                { responsivePriority: 3, targets: 5 }  // 操作
            ]
        });
    });
</script>
<!-- third party js ends -->
<!-- demo app -->
<script src="/admin/assets/js/pages/demo.datatable-init.js"></script>
<!-- end demo js-->

</body>
</html>